html {
  display: flex;
  width: 100%;
}

body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

#main {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.label-btn-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  width: 100%;

  .label-btn {
    position: relative;
    width: 50%;
    text-align: center;
    padding: .5rem 0;
    transition: all .3s;
    border-bottom: 1px solid white;

    &.active {
      color: orangered;
      border-color: orangered;
    }
  }
}

#content {
  flex-grow: 1;
  overflow-y: scroll;
  > div::-webkit-scrollbar,
  &::-webkit-scrollbar {
    display: none;
  }

  > div {
    padding: .5rem;
  }
}

.coupon {
  display: flex;
  padding: .5rem 0;
  position: relative;
  background: white;
  box-shadow: 1px 1px 5px -1px rgba(0, 0, 0, .2);
  margin-bottom: .5rem;

  @yuan-size: 16px;

  &::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 0;
    bottom: 0;
    margin: auto;
    height: @yuan-size;
    width: @yuan-size;
    background: #f7f7fc;
    border-radius: 50% 0 0 50%;
  }

  .left {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 0 .5rem 0 1rem;
    background: white;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      left: -8px;
      top: 0;
      bottom: 0;
      margin: auto;
      height: @yuan-size;
      width: @yuan-size;
      background: #f7f7fc;
      border-radius: 0 50% 50% 0;
    }
  }
  .right {
    flex-grow: 1;
    font-size: 14px;
    padding: 0 .5rem;
    position: relative;
    background: white;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 1px;
      border-left: 1px dashed #a2a2a8;
      transform: scaleX(.5);
    }

    .des {
      font-size: 12px;
      color: #6d6d72;
    }
    .date {
      font-size: 12px;
    }
  }
}

.unused,
.used {
  .icon-container {
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .icon {
    font-size: 3rem;
    margin-right: 1rem;
    color: #c4c4ca;
  }
}

.highlight {
  &.des {
    font-size: 14px;
  }
}